<template>
  <div class='lg-input pr'>
    <div class="real-lg pa">
      <p class="tabs">
        <span v-for="(item, index) in tabData" :key="index" :class="{'active':item.isactive,hover:true}" @click="changeTabs(item)">{{item.label}}</span>
      </p>
      <div class="input-box">
        <el-input v-for="(item, index) in inputList" :key="index" :maxlength="item.maxlength" :minlength="item.minlength" v-if="item.type=='number'" :type="item.isPassword?'password':''" v-model="inputInfo[item.key]" :prefix-icon="item.icon" :placeholder="item.placeholder"></el-input>

        <div v-else-if="item.type=='checknumber'" class="is-check">
          <el-input v-model="inputInfo[item.key]" :prefix-icon="item.icon" :placeholder="item.placeholder"></el-input>
          <el-button type="primary" class="check-btn bc-blue">发送验证码</el-button>
        </div>

        <div v-else-if="item.type=='checkbox'">
          <el-checkbox>阅读并同意</el-checkbox><span class="color-blue hover">《风水网用户服务协议》</span>
        </div>

        <div v-else-if="item.type=='back'" class="back">
          <span class="color-blue hover" @click="item.click()">{{item.label}}</span>
        </div>

        <div v-else-if="item.type=='btn'">
          <el-button type="primary" class="login-btn bc-blue" @click="item.click()">{{item.label}}</el-button>
        </div>
      
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      tabData:[],
      tabData0:[
        {
          label:"注册",
          isactive:true,
          data:[
            {type:'number',key:'phone',icon:'iconfont icon-shouji',placeholder:'请输入您的手机号码',maxlength:11},
            {type:'checknumber',key:'check',icon:'iconfont icon-renzheng1',placeholder:'请输入验证码'},
            {type:'number',isPassword:true,key:'password',icon:'iconfont icon-mimasuo',placeholder:'请设置密码(6-18位)',maxlength:18,minlength:6},
            {type:'checkbox',key:'readed'},
            {type:'btn',label:"注册",click:this.register}
          ]
        },{
          label:"登录",
          isactive:false,
        }
      ],
      tabData1:[
        {
          label:"账号登录",
          isactive:true,
          data:[
            {type:'number',key:'phone',icon:'iconfont icon-shouji',placeholder:'请输入您的手机号码',maxlength:11},
            {type:'number',isPassword:true,key:'password',icon:'iconfont icon-mimasuo',placeholder:'请设置密码(6-18位)',maxlength:18,minlength:6},
            {type:'back',label:'免费注册',click:this.showRegister},
            {type:'btn',label:"登录",click:this.login}
          ]
        },{
          label:"短信登录",
          isactive:false,
          data:[
            {type:'number',key:'phone',icon:'iconfont icon-shouji',placeholder:'请输入您的手机号码',maxlength:11},
            {type:'checknumber',key:'check',icon:'iconfont icon-renzheng1',placeholder:'请输入验证码'},
            {type:'back',label:'免费注册',click:this.showRegister},
            {type:'btn',label:"登录",click:this.login}
          ]
        }
      ],
      inputList:[],
      inputInfo:{}
    };
  },
  methods: {
    /**
     * @name 切换
     */
    changeTabs(item){
      if(item.label==='登录'){
        this.showLogin()
        return
      }
      this.tabData.forEach(ele=>{ele.isactive=false})
      this.$set(item,"isactive",true)
      this.$set(this,'inputList',item.data)
    },

    /**
     * @name 显示注册
     */
    showRegister(){
      this.$set(this,'tabData',this.tabData0)
      this.$set(this,'inputList',this.tabData0[0].data)
    },

    /**
     * @name 显示登录
     */
    showLogin(){
      this.$set(this,'tabData',this.tabData1)
      this.$set(this,'inputList',this.tabData1[0].data)
    },

    register(){
      console.log('注册')
    },

    login(){
      console.log('登录')
    }

  },
  created() {
    var type = _g.getRouterParams(this).type
    type=="register"?this.showRegister():this.showLogin()
  }
};
</script>
<style lang="scss" scoped>
.lg-input {
  height: 100%;
  background-color: rgba(255, 255, 255, 0.11);

  .real-lg{
    height: calc(100% - 40px);
    width: calc(100% - 40px);
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-sizing: border-box;
    padding: 20px;

    .tabs{
      display: flex;
      justify-content:center;

      span{
        font-size: 16px;
        display: inline-block;
        width: 100px;
        text-align: center;
        line-height: 50px;
        color: #666;
      }
      span.active{
        color: $blue;
        border-bottom: 2px solid $blue;
      }
    }
    .input-box{
      padding: 40px 20px;

      .is-check{
        display: flex;

        .check-btn{
          margin-left: 10px;
        }
      }

      .back{
        display: flex;
        
        span{
          margin-left: auto;
        }
      }

      .login-btn{
        width: 100%;
      }
    }
  }
}
</style>